<template>
  <div class="mt">
    <div style="margin: 20px 0">
      <el-input
        v-model="add_parame.title"
        placeholder="Please input interface name"
        class="input-with-select"
      >
        <template #prepend>
          <el-select v-model="add_parame.project" placeholder="Project" style="width: 110px">
            <el-option label="组卷" value="组卷" />
            <el-option label="组卷M站" value="组卷M站" />
            <el-option label="组卷app" value="组卷app" />
            <el-option label="e卷通" value="e卷通" />
          </el-select>
        </template>
      </el-input>
    </div>
    <div>
      <el-input
      v-model="add_parame.url"
      placeholder="Please input url"
      class="input-with-select"
    >
      <template #prepend>
        <el-select v-model="add_parame.method" placeholder="Method" style="width: 110px">
          <el-option label="Get" value="get" />
          <el-option label="Post" value="post" />
          <el-option label="Delete" value="delete" />
          <el-option label="Put" value="put" />
        </el-select>
      </template>
      <template #append>
        <el-button @click="sendRequest">
        <el-icon><Promotion /></el-icon>
        </el-button>
      </template>
    </el-input>
    <div style="margin: 20px 0" />
    <el-input v-model="add_parame.requestBody" autosize type="textarea" placeholder="Please input request body"/>
    <div style="margin: 20px 0" />
    <el-input v-model="add_parame.responseBody" autosize type="textarea" placeholder="Output response body"/>
    </div>
    <el-button type="success" round @click="addInterface" style="margin: 20px 0">保存</el-button>
  </div>
</template>

<script>
// import { ref } from 'vue'
import axios from 'axios'
export default{
  data(){
    return{
      add_parame: {
          "project": '',
          "title": '',
          "method": '',
          "url": '',
          "requestBody": '',
          "responseBody": ''
        }
    }
  },
  methods:{
    addInterface(){
      axios.post('/interface/add', this.add_parame)
      .then((res)=>{console.log(res)})
      .catch((err)=>{console.log(err)})
    },
    sendRequest(){
      axios({
        method: this.add_parame.method,
        url: this.add_parame.url,
        data: this.add_parame.requestBody
      }).then((res)=>{
        if (res.data.success == true){
          console.log('')
        }
        this.add_parame.responseBody = JSON.stringify(res.data)
      }).catch((err)=>{console.log(err)})
    }
  }
}

</script>

<style scoped>
.mt{
  margin: 10px 50px 10px 50px;
}
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>